<template>

	<!--顶部新增、查询-->
	<div style="margin-bottom: 10px;">
		<el-button type="primary" style="margin-right: 10px;" @click= "AddCategoryClick">新增分类</el-button>
	</div>

	<!--分类数据展示表格-->
    <el-table :data="GetCategoryData" style="width: 100%; margin-top: 15px;" highlight-current-row>
		<el-table-column prop="categoryId" label="分类编号" align="center" />
		<el-table-column prop="categoryName" label="分类名称" align="center" />
		<el-table-column prop="categoryQuantity" label="商品数量" align="center" />
		<el-table-column label="分类操作" align="center" fixed="right">
			<template #default="ThisRowData">
				<el-button size="small" type="primary" @click="EditCategoryClick(ThisRowData.row)"style="margin-right: 5px;">
					<el-icon><Edit /></el-icon>
					修改
				</el-button>
				<el-button size="small" type="danger" @click="DeleteCategoryClick(ThisRowData.row)":disabled="ThisRowData.row.categoryQuantity > 0" tooltip-content="分类下有商品，不可删除">
					<el-icon><Delete /></el-icon>
					删除
				</el-button>
			</template>
		</el-table-column>

		<template #empty>
            <el-empty description="暂无商品数据" />
        </template>
    </el-table>
	
	<!--添加分类对话框 -->
	<el-dialog v-model="AddCategoryDialog" title="添加分类" width="500">
		<el-form :model="PostCategoryData">
			<el-form-item label="分类名称">
				<el-input v-model="PostCategoryData.categoryName" placeholder="请输入分类名称" auto-complete="off"/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
                <el-button @click="AddCategoryDialog = false">
                    取消
                </el-button>
                <el-button type="primary" @click="PostCategory">
                    确定
                </el-button>
			</div>
		</template>
	</el-dialog>

    <!--编辑分类对话框 -->
    <el-dialog v-model="EditCategoryDialog" title="编辑分类" width="500">
		<el-form :model="PutCategoryData" label-width="80px" style="padding: 0 30px;">
			<el-form-item label="分类名称">
			<el-input v-model="PutCategoryData.categoryName" placeholder="请输入分类名称" auto-complete="off"/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
                <el-button @click="EditCategoryDialog = false">
                    取消
                </el-button>
                <el-button type="primary" @click="PutCategory">
                    确定
                </el-button>
			</div>
		</template>
    </el-dialog>

    <!-- 删除分类对话框 -->
    <el-dialog v-model="DeleteCategoryDialog" title="删除确认" width="500px">
		<p>分类【{{ deletingCategoryName }}】下有 {{ deletingProductCount }} 个商品</p>
		<p>确认删除此分类及其所有商品？</p>
		<template #footer>
			<div style="display: flex; justify-content: flex-end; width: 100%;">
				<el-button @click="DeleteCategoryDialog = false">取消</el-button>
				<el-button type="danger" @click="DeleteCategory(deletingCategoryId)">
					确认删除
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name='Category'>

// 导入必要组件
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { ElNotification, ElIcon } from 'element-plus';
import { Edit, Delete } from '@element-plus/icons-vue';

// 对话框显示参数
let AddCategoryDialog = ref(false)
let EditCategoryDialog = ref(false)
let DeleteCategoryDialog = ref(false)

// 删除用的变量
const deletingCategoryId = ref<number>(0);
const deletingCategoryName = ref('');
const deletingProductCount = ref(0);

// 生命周期：初始化数据
onMounted(() => {
	GetCategory();
});

// 添加分类回调
function AddCategoryClick(){

	// 编辑数据
	PostCategoryData.categoryId = 0;
	PostCategoryData.categoryName = '';

	// 打开对话框
	AddCategoryDialog.value = true;
}

// 编辑分类回调
function EditCategoryClick(row: any){

	// 编辑数据
	PutCategoryData.categoryId = row.categoryId;
	PutCategoryData.categoryName = row.categoryName;

	// 打开对话框
	EditCategoryDialog.value = true;
}

// 删除分类回调
function DeleteCategoryClick(row: any) {

	// 分类下有商品，填充删除确认数据
	if (row.categoryQuantity > 0) {
		deletingCategoryId.value = row.categoryId;
		deletingCategoryName.value = row.categoryName;
		deletingProductCount.value = row.categoryQuantity;
		DeleteCategoryDialog.value = true;
	} 

  	// 分类下无商品，直接删除
	else {
		DeleteCategory(row.categoryId);
	}
}

// GET ------------------------------------------ GET //

// GET: 获取的分类数据
const GetCategoryData = ref<Array<{ categoryId: number; categoryName: string;categoryQuantity: number; }>>([]);

// GET: 获取分类数据
async function GetCategory(){
	try {
		const res = await axios.get('/api/category');
		console.log(res.data.data)
		GetCategoryData.value = res.data.data || [];
		console.log(GetCategoryData.value)
	} catch (error) {
		ElNotification({
			title: '错误',
			message: '分类列表加载失败\n'+error,
			type: 'error'
		});
	}
}

// POST ------------------------------------------ POST //

// POST: 新增的分类数据
const PostCategoryData = reactive(
	{
		categoryId: 0,
		categoryName: '',
		categoryQuantity: 0,
	}
)

// POST: 新增分类数据
async function PostCategory(){
	try {
		await axios.post('/api/category', {categoryName: PostCategoryData.categoryName});
		ElNotification({
			title: '成功',
			message: '分类新增成功',
			type: 'success'
		});
    } catch (error) {
		ElNotification({
			title: '错误',
			message: "分类新增失败\n"+error,
			type: 'error'
		});
  	}
	AddCategoryDialog.value = false
	GetCategory()
}

// PUT ------------------------------------------ PUT //

// PUT: 编辑的分类数据
const PutCategoryData = reactive(
	{
		categoryId: 0,
		categoryName: '',
		categoryQuantity: 0,
	}
)

async function PutCategory(){
	try {
		await axios.put(`/api/category/${PutCategoryData.categoryId}`, {categoryName: PutCategoryData.categoryName});
		ElNotification({
			title: '成功',
			message: '修改修改成功',
			type: 'success'
		});
    } catch (error) {
		ElNotification({
			title: '错误',
			message: "修改新增失败\n"+error,
			type: 'error'
		});
  	}
	EditCategoryDialog.value = false
	GetCategory()
}

// DELETE ------------------------------------------ DELETE //

// DELETE: 删除分类数据
async function DeleteCategory(categoryId: number){
	try{
		await axios.delete(`/api/category/${categoryId}`);
		ElNotification({
			title: '成功',
			message: '分类删除成功',
			type: 'success'
		});
	} catch(error){
		ElNotification({
			title: '错误',
			message: '分类删除失败'+error,
			type: 'error'
		});
	}
	DeleteCategoryDialog.value = false;
	GetCategory()
}

</script>

<style scoped>

/* 表格居中设置 */
.el-table-column {
    text-align: center;
}

</style>